<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://sksample.github.io/jscssTG/css/style.css">
    <link rel="stylesheet" href="https://sksample.github.io/jscssTG/css/control.css">
    <title>css轮播</title>
</head>
<body>

    <!--主容器-->
    <div class="container">

        <!--控制转到第几张按钮-->
        <input id="btn1"  name="dir" type="radio"  />
        <input id="btn2"  name="dir" type="radio"  />
        <input id="btn3" name="dir" type="radio"  />
        <input id="btn4" name="dir" type="radio"  />
        <input id="btn5" name="dir" type="radio"  />

        <!--控制往左边轮播-->
        <input id="left_btn1" class="dir_btn" name="dir" type="radio"  />
        <input id="left_btn2" class="dir_btn" name="dir" type="radio"  />
        <input id="left_btn3" class="dir_btn" name="dir" type="radio"  />
        <input id="left_btn4" class="dir_btn" name="dir" type="radio"  />
        <input id="left_btn5" class="dir_btn" name="dir" type="radio"  />

        <!--控制往右边轮播-->
        <input id="right_btn1" class="dir_btn"  name="dir" type="radio"  />
        <input id="right_btn2"  class="dir_btn" name="dir" type="radio"  />
        <input id="right_btn3" class="dir_btn" name="dir" type="radio"  />
        <input id="right_btn4" class="dir_btn" name="dir" type="radio"  />
        <input id="right_btn5" class="dir_btn" name="dir" type="radio"  />

        <!--存放图片-->
        <div class="pic">

            <!--给所有图片套一个盒子 通过左边距进行轮播-->
            <div class="box">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
            </div>

            <!--给图片前面加一层图片层 用于实现无缝轮播-->
            <div class="before_box">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
            </div>

            <!--给图片后面加一层图片层 用于实现无缝轮播-->
            <div class="after_box">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
				<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Ff36b0aace41e9292ee47968509e9b853ab373cbea154b-ramnU9_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650873527&t=20f07aab5938cf23d7b1922bc27af7cf">
            </div>
        </div>

        <!--左边的按钮 每次点击都会根据当前是第几张决定显示的按钮-->
        <div class="left_box dir_box">
            <label class="left_btn_1 btn_btn_1" for="left_btn1"></label>
            <label class="left_btn_2 btn_btn_2" for="left_btn2"></label>
            <label class="left_btn_3 btn_btn_3" for="left_btn3"></label>
            <label class="left_btn_4 btn_btn_4" for="left_btn4"></label>
            <label class="left_btn_5 btn_btn_5" for="left_btn5"></label>
        </div>

        <!--右边的按钮 每次点击都会根据当前是第几张决定显示的按钮-->
        <div class="right_box dir_box">
            <label class="right_btn_1 btn_btn_1" for="right_btn1"></label>
            <label class="right_btn_2 btn_btn_2" for="right_btn2"></label>
            <label class="right_btn_3 btn_btn_3" for="right_btn3"></label>
            <label class="right_btn_4 btn_btn_4" for="right_btn4"></label>
            <label class="right_btn_5 btn_btn_5" for="right_btn5"></label>
        </div>

        <!--下方按钮 点击各个按钮 决定跳转到第几张-->
        <div class="count">
            <ul>
                <li class="current">
                    <label class="btn_1" for="btn1"></label>
                </li>
                <li>
                    <label class="btn_2" for="btn2"></label>
                </li>
                <li>
                    <label class="btn_3" for="btn3"></label>
                </li>
                <li>
                    <label class="btn_4" for="btn4"></label>
                </li>
                <li>
                    <label class="btn_5" for="btn5"></label>
                </li>
            </ul>
        </div>

    </div>
	

	
	
	
</body>
</html>